<template>
  <a-card :loading="loading" :bordered="false" :body-style="{padding: '0',boxSizing: 'border-box'}" style='border-radius: 8px;margin-bottom: 12px;'>
    <div class='big-box' >
      <a-row>
        <a-col :xl="8" :lg="8" :md="8" :sm="8" :xs="8">
          <div class='title-text'> POS 增长分析 </div>
        </a-col>
        <a-col :xl="16" :lg="16" :md="16" :sm="16" :xs="16" style='text-align: right'>
<!--          <a-button  @click="downExportXls()" style='margin-right: 12px'> 返回上一级 </a-button>-->
          <a-button type="primary"  @click="downExportXls" > 导出 </a-button>
        </a-col>
      </a-row>
      <div class='border-bottom'></div>
      <div id="myChartPosUp" :style="{maxWidth:'100%', height: '500px'}"></div>
      <div style='margin: 24px'>
        <a-table
          ref="table"
          size="mini"
          :scroll="{x:'max-content'}"
          rowKey="type"
          :pagination='false'
          :columns="columns"
          :dataSource="dataSource"
        />
      </div>
    </div>

  </a-card>
</template>

<script>
import { triggerWindowResizeEvent,thousands } from '@/utils/util'

const echarts = require('echarts/lib/echarts');
require('echarts/lib/component/title');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/grid');
require('echarts/lib/component/legend');
require('echarts/lib/component/dataZoom');
require('echarts/lib/component/graphic');
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');

export default {
  name: 'eChars',
  props:['data'],
  data () {
    return {
      myChart:null,
      columns:[
      ],
      dataSource:[],
      option:{
        // title: {
        //   text:'POS增长分析',
        //   textAlign:'cenetr',
        //   // left: "46%"
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        calculable: true,
        legend: {
          data: ['pos销售(k)', '增长率', '前台毛率'],
          top:20,
        },
        grid: {
          top: '12%',
          left: '5%',
          right: '5%',
          containLabel: true
        },
        dataZoom: [
          {
            type:'inside',
            show: true,
            start: 0,
            end: 100,
            showDataShadow: false,
            xAxisIndex: 0
          },

        ],
        xAxis: [
          {
            type: 'category',
            data: ['一区', '二区', '三区', '四区', '五区', '六区', '七区'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: 'Precipitation',
            // min: 0,
            // interval: 50,
            axisLabel: {
              formatter: '{value} '
            }
          },
          {
            type: 'value',
            // name: 'Temperature',
            // min: 0,
            // max: 100,
            // interval: 10,
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: 'pos销售(k)',
            type: 'bar',
            data: [
              1388, 2693, 2279, 1786, 2639, 2279, 1388,
            ],
            itemStyle: {
              color: '#0099FF'
            },
            barWidth:"30%"
          },
          {
            name: '增长率',
            type: 'line',
            yAxisIndex: 1,
            data: [
              2.0, -24, -2.3, 20.1, 10.8, -2.3, 20.1
            ],
            itemStyle: {
              color: '#FF4400'
            }

          },
          {
            name: '前台毛率',
            type: 'line',
            yAxisIndex: 1,
            data: [11.0,14.8, 13.3, 8.1, 10.2, 11.6, 13.4],
            itemStyle: {
              color: '#39CC75'
            }
          }
        ]
      }
    }
  },
  mounted(){
    setTimeout(()=>{
      this.$nextTick(()=>{
        this.drawLine();
        window.addEventListener ('resize',() => { //监听窗口变化
            this.myChart2.resize();
        })
      })
    },100)

  },
  watch: {
    data (val) {
      if(val.length){
        let _this=this
        let list=val.filter(item=>item.orgName!=='合计')
        _this.option.xAxis[0].data = list.map(item=>item.orgName)
        _this.option.series[0].data = list.map(item=>item.posSales||0)
        _this.option.series[1].data = list.map(item=>item.growthRate||0)
        _this.option.series[2].data = list.map(item=>item.frontGrossProfit||0)
        _this.myChart2.setOption(_this.option);

        let columns=[
          {
            title: 'POS增长',
            align: 'left',
            width:100,
            // fixed:'left',
            dataIndex: 'type'
          },
        ]
        let dataSource=[
          {
            type:'POS销售（K）',
          },
          {
            type:'增长率',
          },
          {
            type:'前台毛利',
          }
        ]
        val.map(item=>{
          columns.push({
            title: item.orgName,
            align: 'left',
            width:100,
            dataIndex: item.orgName
          })
          dataSource[0][item.orgName]=thousands(item.posSales||0)
          dataSource[1][item.orgName]=(item.growthRate||0)+"%"
          dataSource[2][item.orgName]=(item.frontGrossProfit||0)+'%'
        })
        this.dataSource=dataSource
        this.columns=columns
      }
    }
  },
  methods: {
    drawLine(){
      let _this=this
      // 基于准备好的dom，初始化echarts实例
      _this.myChart2 = echarts.init(document.getElementById('myChartPosUp'))
      // 绘制图表
      _this.myChart2.setOption(this.option);
      // _this.myChart2.on('click', function (event) {
      //   if (event.data) {
      //     console.log(event.data)
      //     _this.myChart2.setOption({
      //       xAxis: {
      //         data: [0,1,1,1,12,3,21,3123,]
      //       },
      //       series: {
      //         name: 'pos销售(k)',
      //         type: 'bar',
      //         data:  [0,1,1,1,12,3,21,3123,],
      //         universalTransition: {
      //           enabled: true,
      //           divideShape: 'clone'
      //         }
      //       },
      //       graphic: [
      //         {
      //           type: 'text',
      //           left: 50,
      //           top: 0,
      //           style: {
      //             text: '返回上一级',
      //             fontSize: 14,
      //           },
      //           onclick: function () {
      //             _this.myChart2.setOption(_this.option,true);
      //           }
      //         }
      //       ]
      //     });
      //   }
      // });
    },


    downExportXls(){
      this.$emit('export','ka_order_sales_service')
    },
  }
}
</script>

<style scoped lang='less'>

.big-box{
  box-sizing: border-box;
  //border-bottom: 4px solid #EEF1F4;
  padding: 12px;

}
.title-text{
  font-size: 16px;
  font-family: PingFang SC, PingFang SC-Semibold;
  font-weight: 600;
  text-align: left;
  color: #191a1a;
}
.border-bottom{
  margin-top: 2px;
  width: 100%;
  height: 1px;
  border: 1px solid #f5f5f5;
}
</style>